<template>
  <div class="wrapper">
    <div class="search">
      <div class="search__box">
        <div class="search__box__icon iconfont">&#xe65c;</div>
        <input
          type="text"
          class="search__box__inp"
          autofocus="autofocus"
          @change="handleChange"
          placeholder="山姆会员商店优惠商品"
        />
      </div>
      <div class="search__cancel" @click="handleSearchBack">取消</div>
    </div>
    <div class="area" v-if="history.length">
      <h4 class="area__header">
        搜索历史
        <span class="area__header__clear" @click="handleClearSaerch"
          >清除搜索历史</span
        >
      </h4>
      <ul class="area__list">
        <li
          class="area__list__item"
          v-for="item in history"
          :key="item"
          @click="goToSearchList(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="area hot">
      <h4 class="area__header">热门搜索</h4>
      <ul class="area__list">
        <li
          class="area__list__item"
          v-for="item in hotList"
          :key="item"
          @click="goToSearchList(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { get } from "../../utils/request";

//获取热搜
const useHandleGet = () => {
  let hotList = ref([]);
  const getHotList = () => {
    get("api/shop/search/hot-words").then((response) => {
      if (response.data.errno === 0) {
        hotList.value = response.data.data;
      }
    });
  };
  getHotList();
  return { hotList };
};
export default {
  name: "searchPage",
  setup() {
    const router = useRouter();
    const history = ref(JSON.parse(localStorage.searchList || "[]"));
    //搜索框change事件
    const handleChange = (e) => {
      const searchValue = e.target.value;
      if (!searchValue) return;
      const state = history.value.find((item) => item === searchValue);
      if (!state) {
        history.value.push(searchValue);
        localStorage.searchList = JSON.stringify(history.value);
      }
      router.push(`/searchList?keyword=${e.target.value}`);
      e.target.value = "";
    };
    //清除历史记录事件
    const handleClearSaerch = () => {
      history.value = [];
      localStorage.searchList = JSON.stringify("[]");
    };
    //返回事件
    const handleSearchBack = () => {
      router.back();
    };
    //热门搜索
    const { hotList } = useHandleGet();
    //搜索记录和热门搜索事件
    const goToSearchList = (item) => {
      router.push(`/searchList?keyword=${item}`);
    };
    return {
      handleChange,
      history,
      handleClearSaerch,
      handleSearchBack,
      hotList,
      goToSearchList,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 0.18rem;
}
.search {
  display: flex;
  margin-top: 0.12rem;
  align-items: center;
  color: $content-fontcolor;
  &__box {
    display: flex;
    width: 2.95rem;
    height: 0.32rem;
    align-items: center;
    background-color: $search-bgColor;
    box-sizing: border-box;
    border-radius: 0.16rem;
    padding: 0 0.16rem;

    &__icon {
      font-size: 0.16rem;
    }
    &__inp {
      outline: none;
      border: none;
      background: none;
      width: 100%;
      margin-left: 0.12rem;
    }
  }
  &__cancel {
    margin-left: 0.12rem;
  }
}
.area {
  margin-top: 0.24rem;
  &__header {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    font-size: 0.16rem;
    color: $content-fontcolor;
    line-height: 0.22rem;
    font-weight: normal;
    &__clear {
      font-size: 0.14rem;
      font-weight: normal;
    }
  }
  &__list {
    padding: 0;
    margin: 0.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.1rem;
    &__item {
      padding: 0.08rem 0.1rem;
      color: $color-666;
      font-size: 0.14rem;
      background-color: $search-bgColor;
      border-radius: 0.02rem;
      margin-left: 0.1rem;
      margin-bottom: 0.12rem;
    }
  }
}
.hot {
  margin-top: 0.12rem;
}
input::placeholder {
  font-size: 0.14rem;
  color: #b7b7b7;
}
</style>